<template>
  <!-- 月嫂详情页 -->
  <div class="maternity-page">
    <van-nav-bar
      left-text="家政平台"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
    />
    <div></div>
    <!-- 头部名片区域 -->
    <div class="man-card">
      <div class="header">
        <van-image width="100" height="100" :src="servers.img" />
        <div class="mingpian">
          <div>{{ servers.name }}</div>
          <div class="tag">
            <van-tag
              round
              type="primary"
              :key="index"
              plain
              v-for="(tag, index) in servers.tags"
              >{{ tag }}</van-tag
            >
          </div>
          <div class="jingli">
            <span> {{ servers.address }} |</span>
            <span> {{ servers.age }} | </span>
            <span> {{ servers.experience }} | </span>
            <span> {{ servers.comment }} </span>
          </div>
          <van-button
            type="info"
            round
            size="mini"
            v-if="is_followed"
            @click="onFollow"
            class="follow-btn"
            >关注</van-button
          >
          <van-button
            type="info"
            round
            size="mini"
            v-else
            @click="onFollow"
            class="follow-btn"
            color="#999"
            >已关注</van-button
          >
        </div>
      </div>
      <div class="jieshao">
        <div>注册公司: {{ serversDetail.company }}</div>
        <div class="zhiye">
          职业:<span v-for="(item, index) in serversDetail.work" :key="index">{{
            item
          }}</span>
        </div>
      </div>
      <div class="heshi">
        <van-icon name="certificate" color="#07c160" />
        <div class="shenfen">身份信息已核实</div>
        <div class="lianxifangshi">
          <van-button
            class="diyige"
            plain
            type="info"
            size="mini"
            round
            @click="tanChuKuang"
          >
            电话</van-button
          >
          <br />
          <van-button plain type="info" size="mini" round>微信</van-button>
        </div>
      </div>
    </div>
    <!-- /头部名片区域 -->

    <!-- 个人介绍,主要技能 -->
    <div class="big-box">
      <!-- 主要技能 -->
      <div>
        <div class="jineng">主要技能</div>
        <van-tag
          plain
          type="primary"
          round
          v-for="(item, index) in serversDetail.jineng"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
      <!--/ 主要技能 -->
      <!-- 个人简介2 -->
      <div class="renzhijianli">
        <div class="renzhi">个人简介</div>
        <div class="shuxing">
          <div>任职公司：湖南前海优家网络科技有限公司</div>
          <div>籍贯民族：汉族</div>
          <div>生肖属相：蛇</div>
          <div>星座：摩羯座（12.22~1.19）</div>
          <div>出生日期：1977-12-23</div>
          <div>学历：中专</div>
        </div>
      </div>
      <!-- /个人简介2 -->
      <!-- 个人简介 -->
      <van-collapse
        v-model="activeNames"
        class="geremjianjie"
        :disabled="true"
        is-link
      >
        <van-collapse-item name="1" is-link>
          <template #title>
            <div class="title">个人简历</div>
          </template>
          2019年8月在湖南女子学院优家培训平台以优异的成绩，
          荣获中级育婴结业证书，并获得被动操和实操能手荣誉证书。参加国家职业资格证考试，获得国家职业资格证书育婴员证，会做精致的辅食，婴儿常见疾病的护理，宝宝哄睡，以及良好的生活习惯。擅长科学育儿，会新生儿的黄疸辩证和护理，会脐带消毒和护理，臀部护理，洗澡抚触，婴儿主被动操，穿脱衣服，做简单早教。其他技能：亲和力非常不错，形象气质很好，积极主动，能很好的与他人沟通，做事细心，勤快，有耐心，敬业，能吃苦。
          普通话标准，有爱心，曾在私塾教书2年，对胎婴幼儿教育有一定的认识。有带过一个1岁左右的女宝宝到3岁多上幼儿园的经验，做饭菜好吃，可以兼做饭菜，家务。
        </van-collapse-item>
      </van-collapse>
      <!-- /个人简介 -->

      <!-- 证件信息 -->
      <div class="zhengjian-info">
        <div class="zhengjian_1">证件信息</div>
        <div class="zhengjian-img">
          <van-image
            width="100"
            height="74"
            :src="item"
            v-for="(item, index) in serversDetail.cardImg"
            :key="index"
            @click="look(index)"
          />
        </div>
      </div>
      <!--/ 证件信息 -->
      <!-- 证件信息2 -->
      <div>
        <div class="zhengjiann_2">证件信息</div>
        <div class="zhengjian-image">
          <van-image
            width="100"
            height="74"
            :src="item"
            :key="index"
            v-for="(item, index) in serversDetail.cardImg"
            @click="look(index)"
          />
        </div>
      </div>
      <!--/ 证件信息 2-->
    </div>
    <!--/ 个人介绍,主要技能 -->
    <!-- 底部栏目 -->
    <div class="bottom-box">
      <van-tabbar class="bottom-tabbar" :fixed="false">
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-pinglun1"></i>
          <span class="text" @click="showPopups">评价</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-fenxiang2"></i>
          <span class="text" @click="showShares = true">分享</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-weixin"></i>
          <span class="text">微信联系</span>
        </van-tabbar-item>
        <van-tabbar-item>
          <i slot="icon" class="iconfont icon-dianhua"></i>
          <span class="text" @click="showPopup">电话联系</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <van-share-sheet
      v-model="showShares"
      title="立即分享给好友"
      :options="options"
    />
    <!--/ 底部栏目 -->
    <van-popup v-model="showMobile" position="top" :style="{ height: '80%' }"
      >打电话</van-popup
    >
    <!-- 评价弹出框 -->

    <van-popup v-model="show" position="bottom">
      <div class="w-guestbook-container">
        <div class="w-guestbook-item" w-placeholder>
          <input
            type="text"
            class="w-guestbook-input"
            placeholder="留言标题"
            autocomplete="off"
          />
        </div>
        <div class="w-guestbook-item" w-placeholder>
          <input
            type="text"
            placeholder="留言内容"
            class="w-guestbook-input"
            autocomplete="off"
          />
        </div>
        <van-button class="button">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getServersById, getserversDetailByServersId } from '@/api/servers'
import { ImagePreview } from 'vant'
export default {
  name: 'MaternityPage',
  components: {
  },
  provide: function () { },
  props: {},
  data () {
    return {
      serversId: this.$route.params.serversId,
      serversDetail: '',
      servers: '',
      activeNames: [0],
      is_followed: true,
      showShares: false,
      showMobile: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      show: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadserversId()
    this.loadServersById()
    this.loadserversDetailByServersId()
  },
  mounted () { },
  methods: {
    loadserversId () {
      // this.serversId = this.$route.params.serversId
      // console.log(this.serversId)
    },
    async loadServersById () {
      const { data } = await getServersById(this.serversId)
      // console.log(data)
      this.servers = data[0]
    },
    async loadserversDetailByServersId () {
      const { data } = await getserversDetailByServersId(this.serversId)
      this.serversDetail = data[0]
      // console.log(this.serversDetail)
    },
    look (index) {
      ImagePreview(this.serversDetail.cardImg, index)
    },
    onFollow () {
      this.is_followed = !this.is_followed
      if (this.is_followed) {
        this.$toast('取消关注!')
      } else {
        this.$toast('关注成功!')
      }
    },
    tanChuKuang () {
      this.$dialog.confirm({
        message: '拨打13388999999吗?'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    showPopup () {
      // this.showMobile = true
      window.location.href = 'tel:13911111111'
    },
    showPopups () {
      this.show = true
    }
  }
}
</script>
<style lang="less" scoped>
.maternity-page {
  background-color: #f8f8f8;
  // position: relative;
  padding-bottom: 100px;
  /deep/ .van-nav-bar {
    // position: fixed;
    height: 190px;
    background-color: #3f51b5;
  }
  /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 35px;
  }
  /deep/ .van-icon-arrow-left::before {
    color: #fff;
    font-size: 45px;
  }
  /deep/ .van-nav-bar__content {
    height: 190px;
  }
  .man-card {
    // position: relative;
    width: 684px;
    height: 416px;
    // background-color: #f5f7f9;
    // margin-top: 200px;
    // z-index: 2;
    // left: 32px;
    margin: 200px auto 30px;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    .header {
      display: flex;
      .mingpian {
        position: relative;
        flex: 1;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        font-size: 30px;
        color: #101010;
        .jingli {
          font-size: 12px;
          color: #979191;
        }
        .tag {
          flex: 1;
          padding-top: 15px;
          .van-tag {
            padding: 10px 30px;
            margin-right: 10px;
            margin-top: 30px;
          }
        }
        .van-button {
          position: absolute;
          top: 15px;
          right: 15px;
          background-color: #3f51b5;
          border: #fff;
          width: 126px;
          height: 50px;
        }
      }
    }
    .jieshao {
      font-size: 12px;
      color: #979191;
      margin-top: 15px;
    }
    .zhiye {
      margin-top: 15px;
      span {
        padding-left: 12px;
      }
    }
    .heshi {
      height: 65px;
      .van-icon {
        right: 250px;
        bottom: -26px;
      }
      .lianxifangshi {
        float: right;
        box-sizing: border-box;
        bottom: 30px;
        /deep/ .van-button {
          float: right;
          width: 142px;
          height: 46px;
          right: 0;
          .diyige {
            margin-bottom: 10px;
          }
        }
      }
      .shenfen {
        // flex: 1;
        float: left;
        font-size: 28px;
        // bottom: 15px;
        margin-top: 30px;
        margin-left: 70px;
      }
    }
  }
  .big-box {
    margin: 0 auto 50px;
    // position: absolute;
    width: 684px;
    // height: 1800px;
    background-color: #fff;
    top: 600px;
    left: 32px;
    border-radius: 4px;
    padding: 30px;
    box-sizing: border-box;
    .jineng {
      height: 30px;
      border-left: 8px solid #3f51b5;
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 15px;
      line-height: 30px;
      vertical-align: middle;
    }
    .van-tag {
      padding: 10px 30px;
      margin: 15px;
      font-size: 20px;
      color: #3f51b5;
    }
    .geremjianjie {
      .title {
        height: 30px;
        border-left: 8px solid #3f51b5;
        font-size: 28px;
        padding-left: 20px;
        margin-bottom: 15px;
        line-height: 30px;
        vertical-align: middle;
      }
    }
    .zhengshu p {
      font-size: 24px;
      color: #7b7777;
      margin-left: 20px;
    }
    .renzhijianli {
      // margin-top: 20px;
      box-sizing: border-box;
    }
    .renzhi {
      height: 30px;
      border-left: 8px solid #3f51b5;
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 30px;
      margin-top: 20px;
      vertical-align: middle;
      line-height: 30px;
    }
    .shuxing {
      height: 264px;
      font-size: 24px;
      color: #7b7777;
      margin-left: 20px;
      margin-bottom: 30px;
      div {
        margin-bottom: 15px;
      }
    }
    .zhengjian-info {
      // padding: 30px 0;
      padding-top: 30px;
      .zhengjian_1 {
        height: 30px;
        border-left: 8px solid #3f51b5;
        font-size: 28px;
        padding-left: 20px;
        margin-bottom: 30px;
        margin-top: 5px;
        vertical-align: middle;
        line-height: 30px;
      }
      .zhengjian-img {
        display: flex;
        margin-bottom: 45px;
        .van-image {
          margin-left: 10px;
          flex: 1;
        }
      }
    }
    .zhengjiann_2 {
      height: 30px;
      border-left: 8px solid #3f51b5;
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 30px;
      margin-top: 5px;
      vertical-align: middle;
      line-height: 30px;
    }
    .zhengjian-image {
      display: flex;
      margin-bottom: 45px;
      .van-image {
        margin-left: 10px;
        flex: 1;
      }
    }
  }
  .bottom-box {
    width: 750px;
    // height: 134px;
    position: fixed;
    left: 0;
    bottom: 0;
    .van-tabbar-item {
      color: #646566;
    }
    .bottom-tabbar {
      padding: 10px 0;
      .iconfont {
        font-size: 40px;
      }
      span.text {
        font-size: 12px;
      }
    }
  }
  .w-guestbook-container {
    height: 300px;
    text-align: center;
    .w-guestbook-item {
      height: 72px;
      width: 700px;
      // background-color: #7f7f7f;
      padding: 0 12px;
      margin: 20px auto;
      border: #ccc solid 1px;
      border-radius: 10px;
      .w-guestbook-input {
        color: #000;
        margin: 0;
        padding: 7px 0;
        width: 100%;
        min-height: 22px;
        line-height: 22px;
        // background-color: #7f7f7f;
        border: none;
        outline: none;
        font-size: 14px;
        font-family: 'Microsoft YaHei';
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
      }
    }
    .button {
      width: 200px;
      height: 70px;
      background-color: #b42c56;
      color: #fff;
      font-weight: 700;
      border-radius: 30px;
    }
  }
}
</style>
